<script setup lang="ts">
import ChooseGoodsPopup from '@/components/q-choose-goods-popup/chooseGoods.vue'
import { useVModel } from '@vueuse/core'
import { ElMessage } from 'element-plus'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default() {
            return false
        },
    },
})
const emit = defineEmits(['update:modelValue', 'onConfirm'])
const _isShow = useVModel(props, 'modelValue', emit)
const goodsData = ref([])
const chooseGoodsPopupRef = ref()

const handleClose = () => {
    _isShow.value = false
}
const handleConfirm = () => {
    const tempGoods = chooseGoodsPopupRef.value.tempGoods
    const goodsList = chooseGoodsPopupRef.value.goodsList
    if (tempGoods.length === 0) {
        return ElMessage.error('请选择商品')
    }
    emit('onConfirm', { tempGoods, goodsList })
    _isShow.value = false
}
</script>

<template>
    <!-- 选择商品弹出 s-->
    <el-dialog v-model="_isShow" title="选择商品" width="850px" :before-close="handleClose">
        <ChooseGoodsPopup ref="chooseGoodsPopupRef" :point-goods-list="goodsData" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="_isShow = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 选择商品弹出 e-->
</template>

<style scoped></style>
